<template>
  <view>
<!--    <navigator url="/pages/store/couponCreation">
      <view class="cartBtn">
        创建优惠券
      </view>
    </navigator>-->
    <!-- 顶部选项卡 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === '已上架' }" @click="currentTab = '已上架'">已上架</view>
      <view class="tab-item" :class="{ active: currentTab === '已下架' }" @click="currentTab = '已下架'">已下架</view>
    </view>

    <scroll-view
        class="goods-scroll-content"
        scroll-y
        @scrolltolower="loadData"
        refresher-triggered="triggerData"
    >
      <view class="itemC" v-for="item,index of list" :key="index">
        <view class="" style="margin: 10rpx 0;display: flex;align-items: flex-end;">
          <view class="">
            活动名称：
          </view>
          <view class="titleText">
            {{item.promotionName}}
          </view>
        </view>
        <view class="">
          <view class="" style="margin-bottom: 10rpx;">
            <span>优惠券名称：</span><span style="font-size: 32rpx;">{{item.couponName}}</span>
          </view>
          <view class="" style="font-size: 22rpx;color: #999;">
            <span>活动时间：</span><span>{{item.startTime}} ~ {{item.endTime}}</span>
          </view>
        </view>
        <view class="">
          <view class="">
            活动描述：
          </view>
          <view class="">
            {{item.description}}
          </view>
        </view>
        <view class="upBtn">
          <view class="btnView" @click="upDataItem(item.id)">
            修改优惠券
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-buttons">
        <view class="select-all">
          <label>全选</label>
          <checkbox v-model="isAllSelected" @change="handleSelectAll"></checkbox>
        </view>
      </view>
      <view class="confirm-button-container">
        <button class="confirm-btn" :disabled="!isAnySelected" @click="confirmRemove">确认下架</button>
      </view>
    </view>
    <view class="add-icon-container">
      <view class="add-icon" @click="navigatorTo('/pages/store/couponCreation')">
        <text>+</text>
      </view>
    </view>

  </view>
</template>

<script>
import {selectStoreCouponList} from "@/api/store"
import storage from "@/utils/storage";
export default {
  data() {
    return {
      currentTab: '上架',
      queryParams: {
        pageSize: 10,
        pageNumber: 1,
      },
      list:[]
    }
  },
  onLoad(){
    // this.getSelectStoreCouponList()
  },
  onShow(){
    this.queryParams.pageNumber = 1
    this.list = []
    this.getSelectStoreCouponList()
  },
  methods: {
    navigatorTo(url){
      uni.navigateTo({
        url: url
      });
    },
    getSelectStoreCouponList(){
      this.queryParams.storeId=storage.getUserInfo().storeId
      selectStoreCouponList(this.queryParams).then(res => {

        if (res.data.success) {

          if(res.data.result.records.length>0){
            this.list = this.list.concat(res.data.result.records);
          }

        }
      })
    },
    // 加载数据
    loadData() {
      this.queryParams.pageNumber++;
      setTimeout(() => {
        this.getSelectStoreCouponList();
      }, 800)
    },
    upDataItem(id){
      uni.navigateTo({
        url: '/pages/store/couponCreation?id='+ id + '&type=updata'
      });
    },
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}
.tab-item {
  padding: 10rpx 20rpx;
  color: #666;
}
.tab-item.active {
  color: #000;
  border-bottom: 2rpx solid #000;
}


.itemC{
  width: 95%;
  background: #FFF;
  margin: 5px auto;
  border-radius: 5px;
  padding: 10px;
  position: relative;
}
.titleText{
  font-size: 18px;
  color: red;
  font-weight: bold;
}
.cartBtn{
  width: 30vw;
  height: 10vw;
  background: red;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  position: relative;
  left: 65vw;
  margin: 3vw 1vw;
}
.goods-scroll-content {
  height: 85vh;
}
.upBtn{
  position: absolute;
  top: 20rpx;
  right: 10rpx;
}
.btnView{
  background: red;
  padding: 1vw;
  color: #FFF;
  border-radius: 5px;
}


.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-top: 1rpx solid #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.action-buttons {
  display: flex;
  align-items: center;
}
.select-all {
  display: flex;
  align-items: center;
}
.confirm-button-container {
  width: 45%;
}
.confirm-btn {
  background-color: #ccc;
  color: #fff;
  padding: 10rpx 20rpx;
  border: none;
  border-radius: 5rpx;
  width: 100%;
}
.confirm-btn[disabled] {
  background-color: #eee;
  color: #999;
}
.add-icon-container {
  position: absolute;
  bottom: 10%;
  right: 20rpx;
}
.add-icon {
  position: relative;
  bottom: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: #f90;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color: #fff;
}
</style>
